<template>
  <div class="ysq-right-top d-flex-c flex-1 overflow-hidden">
    <div class="panel-header-bg flex-between">
      <div class="title-text">
        水情信息
      </div>
      <span class="c-text-blue f-12">今日以来</span>
    </div>
    <div class="panel-zone-big-bg right-top d-flex-c flex-1  full-width overflow-x-hidden overflow-y-auto">
      <div
        class="flex-between m-b-mini flex-box-height flex-1"
      >
        <div
          class="panel-zone-bg m-r-mini rain-desc-box full-height flex-0"
        >
          <div class="little-title m-b-mini flex-between">
            水情概述
            <span class="c-text-blue f-12 m-r-13">截至当前</span>
          </div>
          <div class="rain-desc-scroll flex-1">
            <span
              class="p-l-mini f-14"
              v-html="htmlWaterDesc"
            />
          </div>
        </div>
        <ChannelVariation class="flex-1 full-height" />
      </div>
      <div class="panel-zone-bg fixed-box-height flex-1">
        <WaterLevelChart />
      </div>
    </div>
  </div>
</template>

<script>
import WaterLevelChart from '@/views/business/ysqjcdp/components/business/water-level-chart.vue'
import ChannelVariation from '@/views/business/ysqjcdp/components/business/channel-variation.vue'

export default {
  name: 'YsqRightTop',
  components: { WaterLevelChart, ChannelVariation },
  data () {
    return {
      htmlWaterDesc: ''
    }
  },

  created () {
    this.getSQGSData()
  },
  methods: {
    async getSQGSData () {
      const data = await this.$request.formDataPost(window.outApiHw + 'hw-api/outInterface/selectForecastPrecipitation')
      let str = `全省大中型水库总蓄水量${this.getNum(Number(data.lagerW) + Number(data.middleW), 3)}亿立方米，比常年同期多蓄水${this.getNum(data.raLagerMiddleW)}亿立方米。其中大型水库蓄水${this.getNum(data.lagerW)}亿立方米；中型水库蓄水${this.getNum(data.middleW)}亿立方米。`
      if (data.stations) {
        let stations = data.stations.sort((a, b) => {
          return Number(b.w) - Number(a.w)
        })
        str = str + '其中'
        stations = stations.slice(0, 3)
        for (let i = 0; i < stations.length; i++) {
          str = str + `${stations[i].stnm}蓄水${this.getNum(stations[i].w)}百万立方米`
          if (i === stations.length - 1) {
            str = str + '。'
          } else {
            str = str + '；'
          }
        }
      }
      this.htmlWaterDesc = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + str.replace(/(\d+(\.\d+)?)/g, (match) => {
        return '<span class=\'c-text-blue\'>' + match + '</span>'
      })
    },
    getNum (val, number) {
      if (val === null || val === undefined || isNaN(Number(val))) {
        return '0'
      }
      if (!number) {
        return val
      } else {
        return parseFloat(val).toFixed(number)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.flex-box-height {
  min-height: 208px;
  // height: 279px;
}

.fixed-box-height {
  min-height: 198px;
  max-height: 228px;
}

.m-r-13 {
  margin-right: 13px;
}

.rain-desc-box {
  width: 232px;
  line-height: 25px;
  position: relative;
  padding-right: 0 !important;

  .rain-desc-scroll {
    padding-right: 13px;
    overflow-y: auto;
  }

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    background-image: url("~@/assets/images/ysqjcdp/rain-desc.png");
    background-size: 100% 100%;
    width: 231px;
    height: 28px;
  }
}
</style>
